<template>
	<view class="order">
		<view class="nav">
			<text v-for="(item,index) in nav.arr" :key="index" @click="C_navItem(index)" 
				:class="index == nav.active?'active':''"
			>{{item}}</text>
			<view class="slider" :style="{left:nav.left}"></view>
		</view>
		<swiper class="swiper" :current="swiperCurrent" @change="swiperChange">
			<swiper-item v-for="(swiper_item,swiper_index) of nav.arr" :key='index'>
				<scroll-view scroll-y="true" @scrolltolower="lower()" class="scroll-Y" :style="{ height: listHeight + 'px' }">
					<view class="list" v-if="list.length">
						<view v-for="(item,index) in list" :key='index' @click="C_listItem(item)">
							<view class="header">
								<text>订单编号:{{item.orderno}}</text>
								<text>{{item.order_status}}</text>
							</view>
							<view class="shop">
								<image :src="item.images[0]" mode="aspectFill"></image>
								<view>
									<view class="name">{{item.goods_name}}</view>
									<view class="cont">
										<view class="specs">
											<text>{{item.goods_format}}</text> X 
											<text>{{item.goods_num}}</text>
										</view>
										<view class="price">￥{{item.money}}</view>
									</view>
								</view>
							</view>
							<view class="bottom">
								<text class="bg" v-if="item.status == 2" @click.stop="Receiving(item.id,index)">确认收货</text>
								<text v-if="item.status == 3" @click.stop="gotopj(item)">去评价</text>
							</view>
						</view>
					</view>
					<image v-else :src="vuex_httpImageUrl+'/static/common/wnr.png'" mode="widthFix"
						style="margin: 37% 43rpx 0;"
					></image>
				</scroll-view>
			</swiper-item>
		</swiper>
		
		<image class="gotoBuy"
			@click="gotobuy"
		 :src="vuex_httpImageUrl+'static/common/gotubuy.png'" mode="widthFix"></image>
		<!-- <view class="gotoBuy">去购物</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nav:{
					arr:['全部','已付款','已收货','已评价'],
					active:0,
					left:' 10%',
				},
				list:[],
				listHeight:'',
				swiperCurrent:0,
				
				pageNum:1
			};
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({
				success:res=>{
					let pH = res.windowHeight;
					let titleH = uni.createSelectorQuery().in(this).select('.scroll-Y');
					titleH.boundingClientRect(data => {that.listHeight = pH - (data.top + 10);}).exec();
				}
			});
		},
		onShow() {
			console.log(123123123123);
			this.pageNum = 1
			this.def_list()
		},
		watch:{
			'nav.active'(idx){
				this.list = []
				this.pageNum = 1
				this.def_list()
			}
		},
		methods:{
			gotobuy(){
				console.log(123);
				uni.switchTab({
					url:'/pages/healthyShop/healthyShop'
				})
			},
			lower() {
				console.log('打印了')
				this.pageNum++
				this.def_list()
			},
			// 去评价
			gotopj(item){
				uni.navigateTo({
					url:'./pingjia?db='+encodeURIComponent(JSON.stringify(item))
				})
			},
			// 确认收获按钮
			Receiving(order_id,index){
				uni.showModal({
					title:'提示',
					content:'确认收货',
					success:res=>{
						if(res.confirm){
							this.$u.post('/order/affirm_order',{order_id}).then(res=>{
								this.$u.toast('收货成功')
								this.list.splice(index,1)
							})
						}
					}
				})
			},
			C_navItem(index){
				this.swiperCurrent = this.nav.active = index
				this.nav.left = index == 0?'10%':index == 1?'35%':index == 2?'60%':index == 3?'85%':''
			},
			swiperChange(e){
				let index = e.detail.current
				this.nav.active = index
				this.nav.left = index == 0?'10%':index == 1?'35%':index == 2?'60%':index == 3?'85%':''
			},
			C_listItem(item){
				uni.navigateTo({
					url:'./detail/detail?db='+encodeURIComponent(JSON.stringify(item))
				})
			},
			def_list(){
				this.$u.post('/order/order_list',{
					order_status:this.nav.active == 0 ?'':
								 this.nav.active == 1 ?'2':	
								 this.nav.active == 2 ?'3':	
								 this.nav.active == 3 ?'4':'',	
					page:this.pageNum,
					limit:10
				}).then(res=>{
					console.log(res.data);
					let {count,list} = res.data
					
					if(this.pageNum == 1){
						this.list = list
					}else if(this.list.length >= count){
						this.$u.toast('没有更多数据了')
						this.pageNum--
						return
					}else{
						this.list = this.list.concat(list)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 99.5%;
		width: 99.5%;
		overflow: hidden;
		.gotoBuy{
			position: fixed;
			z-index: 2;
			bottom: 20%;
			right: 6%;
			width: 100rpx;
			height: 100rpx;
			// background: #1AA034;
			color: #ffffff;
			border-radius: 50%;
			text-align: center;
			line-height: 100rpx;
		}
		.order{
			height: 100%;
			.nav{
				width: 95%;
				margin: auto;
				position: relative;
				text{
					padding: 20rpx 0 30rpx;
					// border: 1px solid red;
					display: inline-block;
					width: 25%;
					text-align: center;
					color: #818181;
					&.active{
						color: #333;
					}
				}
				.slider{
					position: absolute;
					left: 10%;
					bottom: 15rpx;
					background-color: #2C65E8;
					border-radius: 50rpx;
					width: 35rpx;
					height: 5rpx;
				}
			}
			.swiper{
				height: 100%;
				.list{
					width: 95%;
					margin: auto;
					>view{
						padding: 20rpx;
						background-color: #FFFFFF;
						margin-bottom: 20rpx;
						border-radius: 20rpx;
						>view{
							display: flex;
							align-items: center;
							justify-content: space-between;
							&.header{
								font-size: 24rpx;
							}
							&.shop{
								border-top: 1px solid rgba(0,0,0,.05);
								border-bottom: 1px solid rgba(0,0,0,.05);
								padding: 20rpx 0 ;
								margin: 20rpx 0;
								image{
									border-radius: 10rpx;
									width: 120rpx;
									height: 120rpx;
									margin-right: 15rpx;
								}
								>view{
									flex: 1;
									.name{
										font-weight: bold;
									}
									.cont{
										font-weight: bold;
										margin-top: 20rpx;
										display: flex;
										align-items: center;
										justify-content: space-between;
										.specs{
											font-size: 24rpx;
											font-weight: 100;
										}
									}
								}
							}
							&.bottom{
								font-size: 24rpx;
								justify-content: flex-end;
								text{
									border: 1px solid #2268E2;
									color: #2268E2;
									padding: 10rpx 20rpx;
									border-radius: 50rpx;
									&.bg{
										background-color: #2268E2;
										color: #FFFFFF;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
</style>
